<template>
  <div class="findhouse">
    <div class="header">
      <van-icon name="arrow-left" size="18" @click="$router.back()"/>
      <search-list :label="city.label"/>
    </div>
    <van-sticky>
      <van-dropdown-menu class="query"
                         :close-on-click-outside="false">
        <van-dropdown-item title="区域"
        :title-class="options.area||options.subway?'van-dropdown-menu__title--active':''">
          <picker :columns='area'
                  @updateData='updateArea' />
        </van-dropdown-item>
        <van-dropdown-item
          title="方式"
          :title-class="
            options.rentType ? 'van-dropdown-menu__title--active' : ''
          "
        >
          <picker :columns="type" @updateData="updateType" />
        </van-dropdown-item>
        <van-dropdown-item
          title="租金"
          :title-class="options.price ? 'van-dropdown-menu__title--active' : ''"
        >
          <picker :columns="price" @updateData="updatePrice" />
        </van-dropdown-item>
        <van-dropdown-item
          title="筛选"
          ref="popMenu"
          :title-class="options.more ? 'van-dropdown-menu__title--active' : ''"
          @open="openPopup"
        />
      </van-dropdown-menu>
    </van-sticky>
    <!-- 加载状态 -->
    <van-loading size="50" vertical v-if="isListLoading">加载中...</van-loading>
    <!-- 空状态 -->
    <van-empty description="没有找到房源,请您换个搜索条件吧~" v-else-if="!housesList.length"/>
    <!-- 列表 -->
    <van-list v-else>
      <houses-item :list='housesList'></houses-item>
    </van-list>
    <!-- 弹出框 -->
    <popup ref="morePopup" @closePopup="closePopup" @updateData="updateMore" />
    
  </div>
</template>

<script>
// 导入组件
import Picker from './components/picker.vue'
import Popup from './components/popup.vue'
import HousesItem from './components/housesItem.vue'
import SearchList from '@/components/SearchList'
// 导入请求
import { getHousesCondition, getHouses } from "@/api/house";
// 导入获取城市token方法
import {getId} from '@/utils/auth'
export default {
  name: "FindHouse",
  data() {
    return {
      area: [],
      type: [],
      price: [],
      city: JSON.parse(getId())||{"label":"北京","value":"AREA|88cff55c-aaa4-e2e0"},
      // 筛选条件
      options: {
        // 这里写成了固定的,后期换掉
        cityId: '',
        area: null,
        subway: null,
        rentType: this.$route.query.renType || null,
        price: null,
        more: null,
      },
      housesList: [],
      isListLoading:false
    }
  },
  components: {
    Picker,
    Popup,
    HousesItem,
    SearchList
  },
  mounted() {
    this.getHousesCondition();
    this.getHousesList();
  },
  methods: {
    // 根据城市id获取查询信息
    async getHousesCondition() {
      // 先使用固定城市id,后期将城市id
      const { body } = await getHousesCondition(this.city.value);
      this.area = this.formatArea([body.area, body.subway]);
      this.type = body.rentType;
      this.price = body.price;
      // 给弹出框赋值
      try{
        this.$refs.morePopup.btnGroup = {
          roomType: body.roomType,
          oriented: body.oriented,
          floor: body.floor,
          characteristic: body.characteristic,
        };
      }catch(err){
        console.log(err);
      }
    },
    async getHousesList () {
      // 打开加载状态
      this.isListLoading=true
      this.options.cityId=this.city.value
      const { body } = await getHouses(this.options)
      this.$toast(`共找到 ${body.count} 套房源`)
      this.housesList = body.list
      // 关闭加载状态
      this.isListLoading=false
    },
    // 处理区域数据中的不限项,因为vant在数据没有children的情况下不向下遍历
    formatArea(area) {
      return area.map((item) => {
        if (item.value === "null") {
          item.children = [{ label: "", value: null }];
        } else if (item.children) {
          item.children = this.formatArea(item.children);
        }
        return item;
      });
    },
    // 区域数据更新
    updateArea(index) {
      const values = [
        this.area[index[0]].children[index[1]].value,
        this.area[index[0]].children[index[1]].children[index[2]].value,
      ];
      // 计算出需要的区域id
      const value =
        values[1] === "null"
          ? values[0] === "null"
            ? null
            : values[0]
          : values[1];
      if (index[0] === 0) {
        // 选择的是区域,清空地铁
        this.options.subway = null;
        this.options.area = value;
        // if (values[1] === 'null') {
        //   // 二级为空,则按一级区域id设置
        //   this.options.area = values[0] === 'null' ? '' : values[0]
        // } else {
        //   // 设置为二级区域id
        //   this.options.area = values[1]
        // }
      } else {
        // 选择的是地铁,清空区域
        this.options.area = null;
        this.options.subway = value;
      }
      this.getHousesList();
    },
    // 出租方式更新
    updateType(index) {
      this.options.rentType =
        this.type[index].value === "null" ? null : this.type[index].value;
      this.getHousesList();
    },
    updatePrice(index) {
      this.options.price =
        this.price[index].value === "null" ? null : this.price[index].value;
      this.getHousesList();
    },
    openPopup() {
      this.$refs.morePopup.isShow = true;
    },
    // 关闭弹出层
    closePopup() {
      this.$refs.popMenu.toggle(false);
    },
    updateMore(arr) {
      this.options.more = arr.length ? arr.join(",") : null;
      this.getHousesList();
    },
  },
};
</script>

<style lang="less" scoped>
  .header{
    height: 90px;
    display: flex;
    .van-icon{
      padding-top: 20px;
    }
    .contain{
      top: 0;
      margin: 0;
      left: 38px;
    }
  }
  /deep/.van-overlay{
      background-color: rgba(0, 0, 0, 0);
    }
/deep/.query{
  .van-dropdown-menu__bar{
    height: 80px;
    .van-dropdown-menu__title {
      &.van-dropdown-menu__title--active {
        color: #07c160;
      }
      &::after {
        height: 5px;
        width: 5px;
        right: -10px;
      }
      .van-ellipsis {
        font-size: 35px;
        line-height: 80px;
      }
    }
  }
  .van-overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
</style>
